<template>
  <a-card class="student-questions">
    <h3>学生提问</h3>
    <div
      v-for="(question, index) in questions"
      :key="index"
      class="question"
    >
      <div style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
        <p style="margin: 0; flex: 1;">{{ question.text }}</p>
        <div>
          <a-button type="primary" style="margin-right: 10px;">回答</a-button>
          <span :style="{ color: getTimeColor(question.time) }">
            {{ question.time }} 分钟前
          </span>
        </div>
      </div>
    </div>
  </a-card>
</template>

<script>
export default {
  name: "StudentQuestions",
  props: {
    questions: { type: Array, default: () => [] }
  },
  methods: {
    getTimeColor(time) {
      if (time < 10) return "blue";
      if (time < 30) return "orange";
      return "red";
    }
  }
};
</script>

<style scoped>
.student-questions {
  margin-top: 20px;
}
.question {
  display: flex;
  padding: 10px 0;
}
</style>
